import { Box, Grid, Slider, makeStyles, Button, experimentalStyled } from "@material-ui/core";
import React from "react";
import ll5 from '../../assets/ll2.png'
import leftbutton from '../../assets/leftbutton.png'


const useStyles = makeStyles({
  setpt: {
    width: '120px',
    fontSize: '19px',
    textAlign: 'left',
    lineHeight: '49px',
    fontWeight: 'bold',
    paddingLeft: '10px',
  },
  Box1: {
    marginBottom: '14px',
    height: '49px',
    display: 'flex',
    color: '#ffffff',
    paddingLeft: '25px',
    paddingRight: '25px',
  },
  frid: {
    height: '49px',
    backgroundColor: 'rgba(255,255,255,.3)',
    borderRadius: '12px',
    lineHeight: '49px',
    paddingRight: '25px'
  },
  divinput: {
    width: '84px',
    height: '49px',
    border: '1px solid #fff',
    borderRadius: '6px',
    textAlign: 'center',
    marginLeft: '10px',
    marginRight: '10px',
  },
  divinputs: {
    lineHeight: '47px',
    padding: '0',
    fontSize: '24px',
    '& .MuiInputBase-input': {
      borderBottomWidth: '0',
      textAlign: 'center'
    },
    '&:after': {
      borderBottomWidth: '0 !important'
    },
    '&:before': {
      borderBottomWidth: '0 !important'
    },
    "& input::-webkit-inner-spin-button": { appearance: 'none' }

  },
  Slider1: {
    color: '#fff !important',
    height: '8px !important',
    paddingTop: '0 !important',
    paddingBottom: '0 !important',
    '& .MuiSlider-thumb': {
      height: 24,
      width: 24,
      backgroundColor: '#fff',
      border: '2px solid currentColor',
      marginTop: '-8px',
      marginLeft: '-12px',
      '&:focus, &:hover, &.Mui-active': {
        boxShadow: 'inherit',
      },
    },
    '& .MuiSlider-valueLabel': {
      left: 'calc(-50% + 4px)',
      color: '#232323 !important'
    },
    '& .MuiSlider-track': {
      height: 8,
      borderRadius: 4,
    },
    '& .MuiSlider-rail': {
      height: 8,
      borderRadius: 4,
    },

  },
  item: {
    fontSize: '18px',
    fontWeight: 400,
    color: '#fffff',
    lineHeight: '49px',
    margin: 'auto 4px'
  },
  indextop: {
    marginTop: '20px',
  }
});

const Leftbutton = experimentalStyled(Button)({
  backgroundImage: `url(${leftbutton})`,
  minWidth: '38px',
  width: '38px',
  height: '38px',
  backgroundSize: 'contain',
  backgroundRepeat: 'no-repeat'
})


const Rightbutton = experimentalStyled(Button)({
  backgroundImage: `url(${ll5})`,
  minWidth: '38px',
  width: '38px',
  height: '38px',
  backgroundSize: 'contain',
  backgroundRepeat: 'no-repeat'
})



type Props = {
  name: string,
  index: number,
  setrange(mykey: number, value: number): void,
  wrange(m: boolean): void
  max?: number,
  min?: number,
  mykey: number,
}

function valuetext(value: number) {
  return `${value}°`;
}



export default function (props: Props) {
  const { name, index, setrange, max = 45, min = 45, mykey } = props
  const { Box1, divinput, setpt, Slider1, item, divinputs, indextop, frid } = useStyles();
  const handleSliderChange = (_event?: React.SyntheticEvent, newValue?: number | number[]) => {
    if (typeof newValue === 'number') {
      if (newValue < 0) newValue = 0
      if (newValue > 180) newValue = 180
      setrange(mykey, newValue);
    }
  };

  Slider1

  let box = Box1
  if (mykey === 2) {
    box = box + ' ' + indextop
  }
  return <Box className={box} >
    <Grid container className={frid}>
      <Grid item className={setpt}>
        &nbsp;&nbsp;&nbsp;
        {name}
      </Grid>
      <Grid item className={item}>
        0°
            </Grid>
      <Grid item xs>
        <Slider
          className={Slider1}
          value={index}
          onChange={handleSliderChange}
          getAriaValueText={valuetext}
          aria-labelledby="discrete-slider-custom"
          step={1}
          valueLabelDisplay="auto"
          min={0}
          max={179}
        />
      </Grid>
      <Grid item className={item}>
        180°
      </Grid>
    </Grid>
    <div style={{ lineHeight: '49px', width: '80px' }} className="text-center">
      <Leftbutton onClickCapture={() => { handleSliderChange(undefined, index - 1) }} ></Leftbutton>
    </div>
    <div style={{ lineHeight: '49px', width: '80px' }} className="text-center" >
      <Rightbutton onClickCapture={() => { handleSliderChange(undefined, index + 1) }} ></Rightbutton>
    </div>
    <div className={divinput}>
      <span className={divinputs} >{Math.floor(min)}</span>
    </div>
    <div className={divinput}>
      <span className={divinputs}>{Math.floor(max)} </span>
    </div>
  </Box>
}